// font
@font-roboto: "fonts/roboto";
@font: Roboto,
"Helvetica Neue",
Helvetica,
Arial,
"Microsoft Yahei",
sans-serif;
@font-code: "Source Code Pro",
Consolas,
Monaco,
courier,
monospace;

@font-en: "MV Boli",
Roboto,
serif;
@font-custom:"Comic Sans MS", "Helvetica Neue", "Microsoft Yahei", "Microsoft Yahei", -apple-system, sans-serif;
@font-content:"Helvetica Neue", "Microsoft Yahei", "Microsoft Yahei", -apple-system, sans-serif;
@font-size: 15px;

// color
@lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: rgb(99, 137, 185);
@primaryTextColor: #646464;
@secondaryTextColor: #000;
@borderColor: #dadada;
@backColor: #f6f6f6;
@codeBg: #f6f6f6;
// tags color
@tag-color-1: rgb(221, 221, 220);
@tag-color-2: rgb(220, 226, 238);
@tag-color-3: rgb(216, 236, 227);
@tag-color-4: rgb(238, 225, 213);
@tag-color-5: rgb(241, 241, 215);
@tag-color-6: rgb(236, 208, 225);
//layout
@contentWidth: 982px;
@menuWidth: 240px;
@menuPadding: 20px;
@headerH: 56px;
@navH: 44px;
@mNavH: 36px;
@boxShadow: 0 2px 5px 0 rgba(0, 0, 0, .16),
0 2px 10px 0 rgba(0, 0, 0, .12);
@bg-header: linear-gradient(-90deg, #77ACDC 0%, #77AAFF 100%);
@bg-content-header: linear-gradient(0deg, #F5F1F1 0%, #77AAFF 100%);
@bg-main: linear-gradient(180deg, #F5F1F1 30%, rgb(239, 241, 243) 45%, rgb(247, 244, 238) 71%, #EFEFEF 91%);
@bg-brand: linear-gradient(0deg, #F5F1F1 0%, #77AAFF 100%);
@bg-post: #f6f6f6;
.transition(@s, @dur: ease-in-out) {
    -webkit-transition: @s @dur;
    transition: @s @dur;
}

.transform(@prop) {
    -webkit-transform: @prop;
    transform: @prop;
}

.boxShadow(@s: .4s) {
    -webkit-box-shadow: @boxShadow;
    box-shadow: @boxShadow;
    .transition(@s);
    &:hover,
    &:active {
        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .2), 0 4px 15px rgba(0, 0, 0, .2);
        box-shadow: 0 6px 12px rgba(0, 0, 0, .2), 0 4px 15px rgba(0, 0, 0, .2);
    }
}

.hoverLine(@color) {
    position: relative;
    display: inline-block;
    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: @color;
        visibility: hidden;
        .transform(scaleX(0));
        .transition(.4s);
    }
    &:hover {
        text-decoration: none;
    }
    &:hover::after,
    &:active::after {
        visibility: visible;
        .transform(scaleX(1));
    }
}

.tip() {
    position: relative;
    &:before,
    &:after {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        .transition(.3s);
    }
    &:before {
        content: attr(data-title);
        font-size: 12px;
        color: #fff;
        white-space: nowrap;
        line-height: 24px;
        padding: 0 5px;
        border-radius: 3px;
        background: rgba(0, 0, 0, .8);
    }
    &:after {
        content: "";
        border: 6px solid transparent;
    }
    &:hover {
        &:before,
        &:after {
            visibility: visible;
            opacity: 1;
        }
    }
}

.tip-top() {
    .tip();
    &:before,
    &:after {
        top: -10px;
        right: 50%;
    }
    &:before {
        .transform(translate(50%, -100%));
    }
    &:after {
        border-top-color: rgba(0, 0, 0, .8);
        .transform(translateX(50%));
    }
}

.tip-left() {
    .tip();
    &:before,
    &:after {
        top: 50%;
        .transform(translate(-100%, -50%));
    }
    &:before {
        left: -15px;
    }
    &:after {
        left: -3px;
        border-left-color: rgba(0, 0, 0, .8);
    }
}

.card(@radius: 3px) {
    background: #f6f6f6;
    border-radius: @radius;
    -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}

.hoverAnchor(@anchorColor: #999) {
    position: relative;
    white-space: normal;
    background: transparent;
    text-decoration: none;
    border-bottom: 1px dotted lighten(@anchorColor, 20%);
    &:after {
        position: absolute;
        bottom: -0.0625rem;
        left: 100%;
        width: 0;
        content: "";
        -webkit-transition: width 350ms, left 350ms;
        transition: width 350ms, left 350ms;
        border-bottom: .0625rem solid @anchorColor;
    }
    &:hover:after {
        left: 0;
        width: 100%;
        -webkit-transition: width 350ms;
        transition: width 350ms;
        text-decoration: underline;
        outline: 0;
    }
}
